<template>
  <a-modal
    title="请假详情"
    centered
    :visible="true"
    width="600"
    @cancel="dialogClosed"
  >
    <div id="customer-print">
      <style>
        @media print {
        .strong-font{
        font-weight: bold;
        }
        }
      </style>
      <table border="1" cellpadding="15" style="width:100%;text-align:center">
        <thead>
          <tr>
            <th colspan="6">虎门外语学校请假条</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td width="16%" class="strong-font">
              申请人
            </td>
            <td width="16%">
              {{ dataForm.staffName }}
            </td>
            <td width="16%" class="strong-font">
              部门
            </td>
            <td width="16%">
              {{ $get(deptMaps, `${dataForm.departmentId}.deptName`) || '-' }}
            </td>
            <td width="16%" class="strong-font">
              编号
            </td>
            <td width="16%">
              {{ dataForm.staffId + '' + dataForm.id }}
            </td>
          </tr>
          <tr>
            <td class="strong-font">
              请假类型
            </td>
            <td>
              {{ dataForm.typeName }}
            </td>
            <td class="strong-font">
              开始时间
            </td>
            <td>
              {{ dataForm.startTime }}
            </td>
            <td class="strong-font">
              结束时间
            </td>
            <td>
              {{ dataForm.endTime }}
            </td>
          </tr>
          <tr>
            <td class="strong-font">
              请假时长
            </td>
            <td>
              {{ dataForm.leavePeriod }}
            </td>
            <td class="strong-font">
              请假事由
            </td>
            <td colspan="3">
              {{ dataForm.remark }}
            </td>
          </tr>
          <tr v-for="(item, index) in dataForm.approvalList" :key="index">
            <td class="strong-font">
              审批
            </td>
            <td>
              {{ item.staffName }}
            </td>
            <td>
              <a-tag :color="approvalStatusListFunc(item.status).color">
                {{ approvalStatusListFunc(item.status).value }}
              </a-tag>

            </td>
            <td class="strong-font">
              备注
            </td>
            <td colspan="2">
              {{ item.remark }}
            </td>
          </tr>
          <tr>
            <td class="strong-font">
              抄送
            </td>
            <td colspan="2">
           &nbsp;
            </td>
            <td class="strong-font">
              备注
            </td>
            <td colspan="2">
            &nbsp;
            </td>
          </tr>
          <tr>
            <td class="strong-font">
              申请人签名
            </td>
            <td colspan="2">
            &nbsp;
            </td>
            <td class="strong-font">
              申请时间
            </td>
            <td colspan="2">
              {{ dataForm.createdTime }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <a-button @click="handlePrint()">打印</a-button>
      <a-button @click="dialogClosed()">关闭</a-button>
    </span>
  </a-modal>
</template>
<style lang="less" scoped>
  .strong-font{
    font-weight: bold;
  }
</style>
<script>
import { get } from '@/pages/leave/api/leave'
import { mapState } from 'vuex'
import { approvalStatusListFunc } from '@/utils/department'
export default {
  name: 'LeaveDetail',
  inject: ['formItemLayout'],
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) app.$departmentListFunc()
  },
  data () {
    return {
      dataForm: {
        id: null
      },
      approvalStatusListFunc: approvalStatusListFunc
    }
  },
  computed: {
    ...mapState({
      departmentList: state => state.basic.deptList,
      deptMaps: state => state.basic.deptMaps
    })
  },
  mounted () {
    this.$ajaxSend(get, this.data.id, {
      success: (datas) => {
        this.dataForm = datas
      }
    })
  },
  methods: {
    dialogClosed () {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit () {

    },
    handleChange (value) {

    },
    handlePrint () {
      const prnhtml = window.document.getElementById('customer-print').innerHTML
      var newWin = window.open('')// 新打开一个空窗口
      newWin.document.body.innerHTML = prnhtml
      newWin.document.close()
      newWin.focus()
      newWin.print()
      newWin.close()
    }

  }
}
</script>
